|
1
|
|
|
import * as mdc from 'material-components-web'; |
|
2
|
|
|
import React from 'react'; |
|
3
|
|
|
import ReactDOM from 'react-dom'; |
|
4
|
|
|
import Model, {MenuDictionary} from './SideMenu/Model'; |
|
5
|
|
|
|
|
6
|
|
|
export interface Adapter { |
|
7
|
|
|
onClose(): void |
|
8
|
|
|
onMenu(name: string): void |
|
9
|
|
|
} |
|
10
|
|
|
|
|
11
|
|
|
export interface Properties { |
|
12
|
|
|
model: Model, |
|
13
|
|
|
adapter: Adapter |
|
14
|
|
|
} |
|
15
|
|
|
|
|
16
|
|
|
interface State { |
|
17
|
|
|
} |
|
18
|
|
|
|
|
19
|
|
|
export default class SideMenu extends React.Component<Properties, State> { |
|
20
|
|
|
drawer: mdc.drawer.MDCDrawer | any | undefined; |
|
21
|
|
|
|
|
22
|
|
|
componentDidMount(): void { |
|
23
|
|
|
// @ts-ignore |
|
24
|
3 |
|
this.drawer = new mdc.drawer.MDCDrawer(ReactDOM.findDOMNode(this)); |
|
25
|
3 |
|
this.drawer.listen('MDCDrawer:closed', this.props.adapter.onClose); |
|
26
|
|
|
} |
|
27
|
|
|
|
|
28
|
|
|
onMenuClick(event: React.MouseEvent<HTMLAnchorElement>, name: string) { |
|
29
|
1 |
|
event.stopPropagation(); |
|
30
|
1 |
|
event.preventDefault(); |
|
31
|
1 |
|
this.props.adapter.onMenu(name); |
|
32
|
|
|
} |
|
33
|
|
|
|
|
34
|
|
|
render(): React.ReactElement { |
|
35
|
4 |
|
const model: Model = this.props.model; |
|
36
|
4 |
|
this.drawer && (this.drawer.open = model.isOpen); |
|
37
|
|
|
|
|
38
|
4 |
|
const translation: MenuDictionary<string> = model.translation; |
|
39
|
4 |
|
const isActive: MenuDictionary<boolean> = model.isActive; |
|
40
|
4 |
|
const url: MenuDictionary<string> = model.url; |
|
41
|
|
|
|
|
42
|
4 |
|
const menuEntries: React.ReactElement[] = model.pageNames.map( |
|
43
|
|
|
(name: string, index: number): React.ReactElement => { |
|
44
|
8 |
|
return <a |
|
45
|
|
|
key={'menuEntry:' + name} |
|
46
|
|
|
className={'mdc-list-item' + (isActive[name] ? ' mdc-list-item--activated' : '')} |
|
47
|
|
|
href={url[name]} |
|
48
|
|
|
aria-selected={isActive[name] ? 'true' : 'false'} |
|
49
|
|
|
data-testid={name} |
|
50
|
|
|
tabIndex={index} |
|
51
|
|
|
|
|
52
|
1 |
|
onClick={(event: React.MouseEvent<HTMLAnchorElement>) => this.onMenuClick(event, name)} |
|
53
|
|
|
> |
|
54
|
|
|
<i className="material-icons mdc-list-item__graphic" aria-hidden="true">{name}</i> |
|
55
|
|
|
<span className="mdc-list-item__text">{translation[name]}</span> |
|
56
|
|
|
</a>; |
|
57
|
|
|
} |
|
58
|
|
|
); |
|
59
|
|
|
|
|
60
|
4 |
|
return <React.Fragment> |
|
61
|
|
|
<aside className="mdc-drawer mdc-drawer--modal mdc-top-app-bar--fixed-adjust"> |
|
62
|
|
|
<div className="mdc-drawer__content"> |
|
63
|
|
|
<nav className="mdc-list"> |
|
64
|
|
|
{menuEntries} |
|
65
|
|
|
</nav> |
|
66
|
|
|
</div> |
|
67
|
|
|
</aside> |
|
68
|
|
|
<div className="mdc-drawer-scrim" /> |
|
69
|
|
|
</React.Fragment>; |
|
70
|
|
|
} |
|
71
|
|
|
} |
|
72
|
|
|
|
enbock /
Time-Tracker
